<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将 HTML 元素属性的值作为 html 解析并显示</title>
</head>

<body>
    <div id="change" class="change">
        <div data-html="<h1>Hello, World!</h1>" style="background-color: red">Hello, World!</div>
        <div data-html="<h1>Hello, World!</h1>" style="background-color: green">Hello, World!</div>
    </div>

    <script>
        let elements = document.querySelectorAll("#change > div")
        console.log(elements);
        

        for (let index = 0; index < elements.length; index++) {
            let element = elements[index];
            console.log(element);
            
            let attribueValue = element.getAttribute("data-html")
            console.log(attribueValue);

            // elelment.textContent= attribueValue
            element.innerHTML = attribueValue
            element.removeAttribute("data-html")
        }   


    </script>
</body>

</html>